<template>
  <el-dialog title="新建推广" :visible.sync="visible" width="600px" :close-on-click-modal="false" append-to-body>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="推广名称" prop="inviteName">
        <el-input v-model="form.inviteName" placeholder="请输入推广名称" maxlength="30" show-word-limit />
      </el-form-item>
      <el-form-item label="负责人" prop="inviteUserId">
        <el-select v-model="form.inviteUserId" filterable clearable placeholder="请选择负责人" @change="inviteUserChange" style="width: 100%;">
          <el-option v-for="item in employeeOptions" :key="item.userId" :label="item.nickName" :value="item.userId" />
        </el-select>
      </el-form-item>
  
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">停用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible=false">取 消</el-button>
      <el-button type="primary" :loading="submitting" @click="handleSubmit">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {create} from "@/api/shopTuig/index";
export default {
  name: 'CreatePromotionDialog',
  props: {
    employeeOptions: { type: Array, default: () => [] },
  },
  data() {
    return {
      visible: false,
      submitting: false,
      form: {
        inviteName: '',
        inviteUserId: '',
        inviteUserName:'',
        status: 1,
      },
      rules: {
        inviteName: [{ required: true, message: '请输入推广名称', trigger: 'blur' }],
        inviteUserId: [{ required: true, message: '请选择负责人', trigger: 'change' }],
      },
    }
  },
  methods: {
    open() {
      this.visible = true;
      this.$nextTick(() => { if (this.$refs.formRef) this.$refs.formRef.clearValidate(); });
      this.form = { inviteName: '', inviteUserId: '', inviteUserName:'', status: 1 };
    
    },
    inviteUserChange(e) {
      let data = this.employeeOptions.find(item => item.userId ===e );
      this.form.inviteUserName = data.nickName;
    },

  
    handleSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (!valid) return;
        this.submitting = true;
        // 向上提交数据，交由父组件调接口
        create(this.form).then(res=> {
          this.$message.success('创建成功');
          this.$emit('submit')
          this.visible = false;
        }).finally(()=>{
           this.submitting = false;
        })
      });
    },
  }
}
</script>

<style scoped lang="scss"></style>


